import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:remixicon/remixicon.dart';

class VideosPage extends StatelessWidget {
  const VideosPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        _videoItem(
            "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/df64160a14af41cd8260274b92ca7efa~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?",
          "近些年,前端发展火热, 百家争鸣, 各种技术层出不穷,如今的前端已经不再像以前一样就是简单的写页面、调样式、处理DOM等，现在的前端工作内容越来越复杂，技术点也越来越丰富",
          "爱奇艺",
          "2022-03-16 03:12:16"
        ),
        _videoItem(
            "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa06ec5cc7ae491494de8fe584e2569b~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?",
            "如何真正学习Go 语言",
            "宇宙之一粟",
            "2022-03-16 03:12:16"
        ),
        _videoItem(
            "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cadac39977074303864ede7e60d6786b~tplv-k3u1fbpfcp-no-mark:460:460:460:270.awebp?",
            "Discord模式等十大场景全解析",
            "爱奇艺",
            "2022-03-16 03:12:16"
        ),
        _videoItem(
            "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cdce2dfbfebd427eab822d4f7f7b83bc~tplv-k3u1fbpfcp-no-mark:460:460:460:270.awebp?",
            "SeaTunnel联合Meetup",
            "爱奇艺",
            "2022-03-16 03:12:16"
        ),
        _videoItem(
            "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/93d1afcf203c44d491fa1c5dbae658b9~tplv-k3u1fbpfcp-no-mark:460:460:460:270.awebp?",
            "2021 Elasticsearch 中国开发者大会",
            "爱奇艺",
            "2022-03-16 03:12:16"
        ),
      ],
    );
  }

  Widget _videoItem(String picture, String title, String target, String dateTime) {
    return Container(
      padding:
          EdgeInsets.only(top: 10.h, bottom: 10.h, left: 16.w, right: 16.w),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
            top: BorderSide(color: const Color(0xffEDEDED), width: 0.5.w)),
      ),
      child: Column(
        children: [
          Stack(
            children: [
              Container(
                height: 150.h,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(4.w)),
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        image: CachedNetworkImageProvider(
                          picture,
                        ))),
              ),
              Positioned(
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                child: Container(
                  alignment: Alignment.bottomLeft,
                  color: Colors.black.withOpacity(0.2),
                  padding: EdgeInsets.only(left: 6.w, right: 6.w, bottom: 6.h),
                  child: Text(
                    title,
                    maxLines: 2,
                    style: TextStyle(
                        color: Colors.white,
                        overflow: TextOverflow.ellipsis,
                        fontSize: 13.sp, fontWeight: FontWeight.w600),
                  ),
                ),
              ),
              Positioned(
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                child: Container(
                  alignment: Alignment.center,
                  child: Container(
                    width: 36.w,
                    height: 36.w,
                    decoration: BoxDecoration(
                        color: Colors.black.withOpacity(0.6),
                        borderRadius: BorderRadius.all(Radius.circular(36.w))
                    ),
                    child: const Icon(
                      Remix.play_fill,
                      color: Colors.white,
                    ),
                  ),
                ),
              )
            ],
          ),
          SizedBox(
            height: 4.h,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(target, style: TextStyle(
                  fontSize: 13.sp,
                  color: const Color(0xffB2B2B2)
              )),
              Text(dateTime, style: TextStyle(
                  fontSize: 13.sp,
                  color: const Color(0xffB2B2B2)
              ))
            ],
          )
        ],
      ),
    );
  }
}
